<template>
  <el-card :lang="loading">
    {{ $t('reportModule.platformCurrentData.time') + ' : ' + time }}
    <el-divider />
    <el-row :gutter="20">
      <el-col :span="12">
        <table>
          <tr v-for="(item, index) in $t('reportModule.platformCurrentData.table')" :key="index">
            <td>{{ item['desc'] }}</td>
            <td>{{ tableData[item['reflect']] ? tableData[item['reflect']] : 0 }}</td>
          </tr>
        </table>
      </el-col>
      <el-col :span="12">
        <table>
          <tr v-for="(item, index) in $t('reportModule.platformCurrentData.moneyData')" :key="index">
            <td>{{ item['desc'] }}</td>
            <td>{{ tableData[item['reflect']] ? tableData[item['reflect']] : 0 }}</td>
          </tr>
        </table>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { platformHistory } from '@/api/report'
import { formatDate } from '@/utils/method'
export default {
  name: 'PlatformCurrentData',
  data() {
    return {
      loading: true,
      time: null,
      tableData: {}
    }
  },
  mounted() {
    setInterval(() => {
      this.time = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
    }, 1000)
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      const data = {
        end: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      }
      platformHistory(data)
        .then(res => {
          this.loading = false
          if (res.success) {
            this.tableData = res.data
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error(err.message)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card{
  margin: 10px;
}
table{
  width: 100%;
  border-collapse: collapse;
  tr{
    width: 100%;
    text-align: center;
    td{
      width: 50%;
      height: 50px;
      border: 1px #cccccc solid;
    }
  }
}
</style>
